<template>
  <div class="card">
    <div class="cardTop">
      <t-button @click="visible = true">新建产品</t-button>
      <t-input
        placeholder="请输入内容"
        class="input"
        v-model="searchKey"
        @enter="searchByKey(searchKey)"
      >
        <template #suffix-icon>
          <search-icon size="20px" />
        </template>
      </t-input>
    </div>
    <div class="cardContent">
      <t-row :gutter="[16, 16]">
        <t-col
          :lg="4"
          :xs="6"
          :xl="3"
          v-for="(item, index) in list.slice(
            pagination.pageSize * (pagination.current - 1),
            pagination.pageSize * pagination.current
          )"
          :key="index"
        >
          <t-card :bordered="false">
            <template #avatar>
              <t-avatar size="56px" :icon="icon" />
            </template>
            <template #status>
              <t-tag theme="success" v-if="item.isUse">已启用</t-tag>
              <t-tag v-else disabled>未启用</t-tag>
            </template>
            <template #content>
              <p class="contentTitle">{{ item.title }}</p>
              <p class="contentInfo">{{ item.content }}</p>
            </template>
            <template #footer class="footer">
              <t-avatar-group cascading="left-up" :max="2">
                <t-avatar>{{ item.grade }}</t-avatar>
                <t-avatar>
                  <template #icon>
                    <add-icon />
                  </template>
                </t-avatar>
              </t-avatar-group>
              <t-dropdown
                trigger="click"
                :options="[
                  {
                    content: '管理',
                    value: 'manage',
                    onClick: () => handleManageProduct(item),
                  },
                  {
                    content: '删除',
                    value: 'delete',
                    onClick: () => handleDeleteItem(item),
                  },
                ]"
                :min-column-width="112"
                class="dropdown"
                :disabled="!item.isUse"
              >
                <t-button variant="text" shape="square" :disabled="!item.isUse">
                  <more-icon size="24" />
                </t-button>
              </t-dropdown>
            </template>
          </t-card>
        </t-col>
      </t-row>
    </div>
    <div class="pagination">
      <t-pagination
        v-model="pagination.current"
        showFirstAndLastPageBtn
        :total="cardItemInfo.length"
        :pageSizeOptions="[12, 24, 36]"
        :default-current="pagination.current"
        :default-page-size="pagination.pageSize"
        @current-change="onCurrentChange"
        @page-size-change="onPageSizeChange"
      />
    </div>
    <!-- 新建产品对话框 -->
    <t-dialog
      header="新建产品"
      :visible.sync="visible"
      :onConfirm="onConfirmAnother"
      :onCancel="onCancel"
      :onEscKeydown="onKeydownEsc"
      :onCloseBtnClick="onClickCloseBtn"
      :onOverlayClick="onClickOverlay"
      :onClose="close"
      width="600"
    >
      <div slot="body">
        <t-form :data="formData">
          <t-form-item label="产品名称" :rules="titleRule">
            <t-input
              v-model="formData.title"
              placeholder="请输入产品名称"
            ></t-input>
          </t-form-item>
          <t-form-item label="产品状态">
            <t-radio-group v-model="formData.isUse">
              <t-radio value="1">已启用</t-radio>
              <t-radio value="0">未启用</t-radio>
            </t-radio-group>
          </t-form-item>
          <t-form-item label="产品描述">
            <t-input
              v-model="formData.content"
              placeholder="请输入产品描述"
            ></t-input>
          </t-form-item>
          <t-form-item label="产品类型">
            <t-select
              v-model="formData.grade"
              class="demo-select-base"
              clearable
              placeholder="请输入产品类型"
            >
              <t-option
                v-for="(item, index) in grades"
                :value="item.value"
                :label="item.label"
                :key="index"
              >
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="备注">
            <t-textarea
              v-model="formData.description"
              placeholder="请输入内容"
            ></t-textarea>
          </t-form-item>
        </t-form>
      </div>
    </t-dialog>
    <!-- 删除对话框 -->
    <t-dialog
      header="确认删除"
      body="删除数据后将不再恢复，确认删除吗？"
      :visible.sync="deletedVisible"
      :onConfirm="onConfirmDleted"
      :onCancel="onCancel"
      :onEscKeydown="onKeydownEsc"
      :onCloseBtnClick="onClickCloseBtn"
      :onOverlayClick="onClickOverlay"
      :onClose="close"
    ></t-dialog>
  </div>
</template>

<script>
import { SearchIcon, UserIcon, AddIcon, MoreIcon } from "tdesign-icons-vue";
export default {
  data() {
    return {
      deletedItem: null,
      deletedVisible: false,
      visible: false,
      searchKey: null,
      pagination: { current: 1, pageSize: 12 },
      grades: [
        {
          label: "A",
          value: "A",
        },
        { label: "B", value: "B" },
        { label: "C", value: "C" },
        { label: "D", value: "D" },
      ],
      cardItemInfo: [
        {
          id: 0,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: true,
          title: "SVG",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
        {
          id: 1,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: true,
          title: "SSL证书",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
        {
          id: 2,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: false,
          title: "SSL证书",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
        {
          id: 3,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: false,
          title: "SSL证书",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
        {
          id: 4,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: false,
          title: "SSL证书",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
        {
          id: 5,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: false,
          title: "SSL证书",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
        {
          id: 6,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: false,
          title: "SSL证书",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
        {
          id: 7,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: false,
          title: "SSL证书",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
        {
          id: 8,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: false,
          title: "SSL证书",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
        {
          id: 9,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: false,
          title: "SSL证书",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
        {
          id: 10,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: true,
          title: "SSL证书",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
        {
          id: 11,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: true,
          title: "SSL证书",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
        {
          id: 12,
          num: Math.floor(Math.random() * 3000) + 1,
          isUse: true,
          title: "SS证书",
          content:
            "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多",
          grade: "B",
        },
      ],
      list: [],
      formData: {},
      titleRule: [{ required: true, message: "产品名称必填" }],
    };
  },
  mounted() {
    this.list = this.cardItemInfo;
  },
  components: {
    SearchIcon,
    AddIcon,
    MoreIcon,
  },
  methods: {
    handleManageProduct(item) {},
    handleDeleteItem(item) {
      this.deletedVisible = true;
      this.deletedItem = item;
    },
    onConfirmDleted() {
      // console.log(this.deletedItem);
      const { num } = this.deletedItem;
      this.cardItemInfo.filter((item, index) => {
        if (item.num === num) {
          this.cardItemInfo.splice(index, 1);
        }
      });
      this.list = this.cardItemInfo;
      // console.log(this.cardItemInfo);
      this.deletedVisible = false;
      this.$message.success("删除成功");
    },
    searchByKey(searchKey) {
      if (searchKey === "") {
        this.list = this.cardItemInfo;
      } else {
        this.list = this.list.forEach((item) => {
          return item.title === searchKey;
        });
      }
      console.log(searchKey);
    },
    icon() {
      return <UserIcon />;
    },
    onCurrentChange(current) {
      this.pagination.current = current;
    },
    onPageSizeChange(size) {
      this.pagination.pageSize = size;
      this.pagination.current = 1;
    },
    onConfirmAnother() {
      // console.log(this.formData);
      if (this.formData.isUse === "1") {
        this.formData.isUse = true;
      } else {
        this.formData.isUse = false;
      }
      const length = this.cardItemInfo.length;
      const id = this.cardItemInfo[length - 1].id + 1;
      this.formData.id = id;
      this.formData.num = Math.floor(Math.random() * 3000) + 1;
      this.cardItemInfo.push(this.formData);
      this.list = this.cardItemInfo;
      this.visible = false;
      this.formData = {};
      this.$message.success("新建成功");
    },
    close(context) {
      console.log("关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发", context);
    },
    onCancel(context) {
      console.log("点击了取消按钮", context);
    },
    onKeydownEsc(context) {
      console.log("按下了ESC", context);
    },
    onClickCloseBtn(context) {
      console.log("点击了关闭按钮", context);
    },
    onClickOverlay(context) {
      console.log("点击了蒙层", context);
    },
  },
};
</script>

<style lang="less" scoped>
.card {
  padding: 10px 10px;
}
.cardTop {
  display: flex;
  justify-content: space-between;
  .input {
    width: 480px;
  }
}
.cardContent {
  margin-top: 20px;
  .contentTitle {
    font-size: 16px;
    margin-bottom: 5px;
  }
  .contentInfo {
    font-size: 12px;
    color: #ccc;
    height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.pagination {
  margin-top: 20px;
}
</style>
